<script lang='ts' setup>
import { ref, reactive, watch } from 'vue';
import { ElLoading } from "element-plus";
const emit = defineEmits(["update:modelValue", "confirm", "close", "open"])
const props = defineProps({
    modelValue: {//是否开启弹窗
        type: Boolean,
        default: false
    },
    loading: {//是否开启loading遮罩层
        type: Boolean,
        default: false
    },
    loadingTip: {//提交loading提示文字
        type: String,
        default: '提交中，请耐心等待...'
    },
    height: {//弹窗内容高度，不好含弹窗包裹层
        type: String,
        default: '200px'
    },
    width: {//弹窗宽度
        type: String,
        default: '200px'
    },
    title: {//弹窗标题
        type: String,
        default: '标题'
    },
    draggable: {//是否可拖拽弹窗
        type: Boolean,
        default: false
    },
    showClose: {//是否显示右上角关闭
        type: Boolean,
        default: true
    },
    confirmText: {//确认按钮文字
        type: String,
        default: '提交'
    },
    cancelText: {//取消按钮文字
        type: String,
        default: '关闭'
    },
    showCancel: {//是否显示取消按钮
        type: Boolean,
        default: true
    }
})
//使用js开启局部遮罩层
let pupop: any = null
watch(() => props.loading, (newVal, oldVal) => {
    if (newVal) {
        if (pupop) {
            return
        }
        pupop = ElLoading.service({
            lock: true,
            text: props.loadingTip,
            fullscreen: false,
            target: '.el-dialog',
            background: "rgba(255, 255, 255, 0.6)"
        });
    } else {
        if (pupop) {
            pupop.close()
            pupop = null
        }
    }
}, { immediate: true });
const close = () => {
    emit("update:modelValue", false)
    emit('close', 'close')
}
</script>

<template>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" :draggable="draggable"
        :model-value="modelValue" :title="title" :width="width" :show-close="showClose" align-center @close="close"
        @open="$emit('open')">
        <div class="web-scorll" :style="{ width: '100%', height, overflowX: 'hidden', overflowY: 'auto' }">
            <slot name="default"></slot>
        </div>
        <template #footer>
            <slot name="footer">
                <div class="dialog-footer">
                    <el-button v-show="showCancel" @click="emit('update:modelValue', false)">{{ cancelText
                    }}</el-button>
                    <el-button type="primary" @click="$emit('confirm', 'submit')">
                        {{ confirmText }}
                    </el-button>
                </div>
            </slot>
        </template>
    </el-dialog>
</template>

<style scoped lang='scss'></style>